<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for=" (item,index) in arr " :key="index"> {{item}} -- {{index}}</li>
        </ul>

        <div>
            <!-- a 从1 开始 ， b 从 0 开始 -->
            <button v-for="(a,b) in num" :key="a">第{{ a }} - {{b}}页</button>
        </div>

        <p>
            <!-- c 字符 ， d 下标-->
            <span v-for="(c,d) in str" :key="d">{{ c }} ---{{d}}</span>
        </p>

        <ul>
            <li v-for="(e,f) in obj"> {{f}}是{{ e }}</li>

        </ul>


        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.user}}</td>
                </tr>
            </tbody>
        </table>

        <ul>

            <li v-for="(item,index) in nav " :key="item.id">
                <span>{{item.title}}</span>
                <ul>
                    <li v-for="(v,i) in item.children" :key="v.id">{{v.title}}</li>
                </ul>
            </li>
        </ul>

    </div>


    <script>
        // Vue.config.productionTip = false

        new Vue({
            el: "#app",
            data() {
                return {

                    arr: [11, 22, 33, 44, 11],
                    num: 5,
                    str: "你好世界",
                    obj: {
                        name: "gao",
                        age: 18
                    },
                    list: [{
                        "id": 1,
                        "user": "gao"
                    }, {
                        "id": 2,
                        "user": "gao"
                    }, {
                        "id": 3,
                        "user": "gao"
                    }, {
                        "id": 4,
                        "user": "gao"
                    }, ],

                    nav: [{
                        "id": 11,
                        "title": "电脑",
                        "children": [{
                            "id": 111,
                            "title": "华硕"
                        }, {
                            "id": 112,
                            "title": "联想"
                        }, {
                            "id": 113,
                            "title": "戴尔"
                        }, ]
                    }, {
                        "id": 22,
                        "title": "手机",
                        "children": [{
                            "id": 222,
                            "title": "oppo"
                        }, {
                            "id": 223,
                            "title": "坚果"
                        }, {
                            "id": 224,
                            "title": "摩托罗拉"
                        }, ]
                    }]

                }
            }
        })
    </script>

</body>

</html>